<template>
  <div>
    <el-form-item label="实际经营地址：">
      <el-amap-search-box class="search-box" :default="defaultValue" :search-option="searchOption"
                          :on-search-result="onSearchResult"
      >
      </el-amap-search-box>
      <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center">
      </el-amap>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: 'Map',
  components: {},
  props: {},
  data() {
    let _this = this
    return {
      center: [121.59996, 31.197646],
      lng: 0,
      lat: 0,
      plugin: [{
        enableHighAccuracy: true, // 是否使用高精度定位，默认:true
        timeout: 100, // 超过10秒后停止定位，默认：无穷大
        maximumAge: 0, // 定位结果缓存0毫秒，默认：0
        convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
        showButton: true, // 显示定位按钮，默认：true
        buttonPosition: 'RB', // 定位按钮停靠位置，默认：'LB'，左下角
        showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
        showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true
        panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
        zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        extensions: 'all',
        pName: 'Geolocation'
      }],
      defaultValue: '',
      searchOption: {
        // 限制搜索城市的范围
        citylimit: false
      },
      content: '',
      inputValue: '',
      searchResult: {
        address: '',
        latitude: '',
        longitude: '',
        name: '',
        type: '',
        country: '',
        province: '',
        city: '',
        area: '',
        township: '',
        street: '',
        neighborhood: '',
        locationName: ''
      },
      events: {
        click(e) {
          _this.center = [e.lnglat.lng, e.lnglat.lat]
          _this.form.lon = e.lnglat.lng
          _this.form.lat = e.lnglat.lat
          _this.getAddress(_this.center)
          _this.defaultValue = ''
        }
      }
    }
  },
  methods: {
    onSearchResult(pois) {
      //搜索
      let latSum = 0
      let lngSum = 0
      let that = this
      if (pois && pois.length > 0) {
        //如果长度为1则无需转化
        let poi = pois[0]
        let lng = poi['lng']
        let lat = poi['lat']
        that.center = [lng, lat]
        that.zoom = 18
        that.content = poi.name
        that.searchResult.address = poi.address
        that.searchResult.latitude = poi.lat
        that.searchResult.longitude = poi.lng
        that.form.lon = lng
        that.form.lat = lat
        that.getAddress(that.center)
      } else {
        that.searchResult = []
      }
    },
    // 获取详细地址
    getAddress(center) {
      let _this = this
      let geocoder = new AMap.Geocoder({})
      geocoder.getAddress(center, function(status, result) {
        if (status === 'complete' && result.info === 'OK') {
          let obj = result.regeocode.addressComponent
          let locationName =
            obj.province +
            obj.city +
            obj.district +
            obj.township +
            obj.street +
            obj.streetNumber

          _this.form.address = locationName
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
